import React from 'react';
import { Card, Row, Col, Statistic, Progress } from 'antd';
import { AlertOutlined, WarningOutlined, SafetyOutlined } from '@ant-design/icons';
import { Pie, Line } from '@ant-design/plots';
import './styles.css';

const RiskDashboard: React.FC = () => {
  // 模拟数据
  const riskData = {
    total: 156,
    high: 23,
    medium: 45,
    low: 88,
    resolved: 134
  };

  // 风险等级分布数据
  const riskLevelData = [
    { type: '高风险', value: riskData.high },
    { type: '中风险', value: riskData.medium },
    { type: '低风险', value: riskData.low },
  ];

  // 风险趋势数据
  const riskTrendData = [
    { date: '2024-01', value: 45, category: '风险事件' },
    { date: '2024-02', value: 52, category: '风险事件' },
    { date: '2024-03', value: 38, category: '风险事件' },
    { date: '2024-04', value: 62, category: '风险事件' },
    { date: '2024-05', value: 48, category: '风险事件' },
    { date: '2024-06', value: 56, category: '风险事件' },
  ];

  const pieConfig = {
    data: riskLevelData,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {
      autoRotate: false,
      content: '{type}: {percentage}',
    },
    meta: {
      value: {
        formatter: (v: number) => `${v}个`,
      },
      type: {
        formatter: (v: string) => v,
      },
    },
    legend: {
      position: 'bottom',
    },
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        },
        content: '总计\n' + riskData.total,
      },
    },
  };

  const lineConfig = {
    data: riskTrendData,
    xField: 'date',
    yField: 'value',
    seriesField: 'category',
    smooth: true,
  };

  return (
    <div className="risk-dashboard">
      <h2>监控大盘</h2>
      <Row gutter={[16, 16]}>
        <Col span={8}>
          <Card>
            <Statistic
              title="总风险事件"
              value={riskData.total}
              prefix={<AlertOutlined />}
            />
            <Progress
              percent={Math.round((riskData.resolved / riskData.total) * 100)}
              success={{ percent: Math.round((riskData.resolved / riskData.total) * 100) }}
              format={percent => `已处理 ${percent}%`}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="高风险事件"
              value={riskData.high}
              prefix={<WarningOutlined style={{ color: '#ff4d4f' }} />}
              valueStyle={{ color: '#ff4d4f' }}
            />
            <Progress
              percent={Math.round((riskData.high / riskData.total) * 100)}
              strokeColor="#ff4d4f"
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="已处理事件"
              value={riskData.resolved}
              prefix={<SafetyOutlined style={{ color: '#52c41a' }} />}
              valueStyle={{ color: '#52c41a' }}
            />
            <Progress
              percent={Math.round((riskData.resolved / riskData.total) * 100)}
              strokeColor="#52c41a"
            />
          </Card>
        </Col>
      </Row>
      <Row gutter={[16, 16]} className="charts-row">
        <Col span={12}>
          <Card title="风险等级分布">
            <Pie {...pieConfig} />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="风险趋势">
            <Line {...lineConfig} />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default RiskDashboard; 